<template>
        <div  class="menu">
            <div class="col-lg-4 menu-item" :class="{'menu-item-activied':index==='1'}" @click="handleClick('1')">
            <span class="glyphicon glyphicon-home"></span>
                <p>首页</p>
            </div>
            <div class="col-lg-4 menu-item" :class="{'menu-item-activied':index==='2'}" @click="handleClick('2')">
            <span class="glyphicon glyphicon-home"></span>
                <p>选号</p>
            </div>
            <div class="col-lg-4 menu-item" :class="{'menu-item-activied':index==='3'}" @click="handleClick('3')">
                <span class="glyphicon glyphicon-home"></span>
                <p>我</p>
            </div>
    </div>

</template >

<script lang="ts">
    import {Vue,Prop,Component} from "vue-property-decorator"

    @Component({})
    export default class MenuBar extends Vue{

        index!: string;
        data() {
            return {
                index: 1,
            }
        }


        handleClick(index: any){
            console.log(index)
            switch (index){
                case '1':
                    //跳转去首页
                    console.log("1")
                    this.$router.push('/')
                    break;
                case '2':
                    this.$router.push('/select')
                    console.log("2")
                    //跳转去选号页面
                    break;
                case '3':
                    console.log("3")
                    this.$router.push('/user')
                    //跳转去用户页面
                    break;
            }
        }
    }
</script>

<style scoped>
    .div-height{
        height: 10px;
    }
</style>